import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import Tag from '@/components/Tag'
import css from './related.module.scss'
class TagRelated extends PureComponent {
    listRef = React.createRef()
    static propTypes = {
        list: PropTypes.array
    }

    static defaultProps = {
        list: []
    }

    state = {
        isExpand: false,
        footHeight: null
    }

    toggle = () => {
        const { isExpand } = this.state
        let height = 0
        this.setState({
            isExpand: !isExpand
        }, () => {
            if (this.state.isExpand) {
                height = window.getComputedStyle(this.listRef.current).height
            }       
            this.setState({
                footHeight: height
            })
        }) 
    }

    handleTag = item => {
        this.props.history.push(`/tag/${item.tid}`)
    }

    render() {
        const { footHeight, isExpand } = this.state
        const { list } = this.props
        return (
            <div className={css['panel']}>
                <div className={css["panel-heading"]}>
                    <span>相关标签</span>
                    <span onClick={this.toggle}><i className={`fa ${isExpand ? 'fa-dropup' : 'fa-dropdown'}`}></i></span>
                </div>
                <div className={`${css["panel-body"]} ${css['animate']}`} style={{'height': footHeight || ''}}>
                    <div ref={this.listRef}>
                        {
                            list.map(item => {
                                return (
                                    <Tag className={css["vtag"]} key={ item.tid } round onClick={() => this.handleTag(item)}>{ item.tname }</Tag>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}

export default withRouter(TagRelated)